<template>
    <require from="./em-chat-channel-members-show.css"></require>
    <em-modal classes="small" em-modal.ref="emModal" onshow.call="showHandler($event)" onapprove.call="approveHandler($event)" confirm-label="确定">
        <div slot="header">频道成员(${channel.members.length})</div>
        <div slot="content" class="em-chat-channel-members-show">
            <table class="ui very basic striped compact table">
                <thead>
                    <tr>
                        <th><i class="at icon" style="margin-right: 0;"></i>用户名</th>
                        <th>姓名</th>
                        <th>邮箱</th>
                        <th>登录</th>
                        <th>状态</th>
                    </tr>
                </thead>
                <tbody>
                    <tr repeat.for="item of channel.members | sort:'username'">
                        <td><i class="at icon" style="margin-right: 0;"></i>${item.username}</td>
                        <td>${item.name}</td>
                        <td>${item.mails}</td>
                        <td title="${item.lastLoginDate | date}">${item.lastLoginDate | timeago}</td>
                        <td if.bind="item.enabled">
                            <div class="ui green tag label">启用中</div>
                        </td>
                        <td if.bind="!item.enabled">
                            <div class="ui red tag label">已停用</div>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </em-modal>
</template>
